<template>
  <div :class="['spec-value-con', `spec-value-con-${item.id}`]">
    <div class="spec-value-item mr10" v-for="children of item.valueList.filter((e) => e.checked)" :key="children.valueCn">
      <div class="left-text cursor">[{{ children.valueCode }}]{{ children.valueCn }}（{{ children.valueEn }}）</div>
      <div class="btn-del cursor" @click="children.checked = false"><icon-minus-circle /></div>
    </div>
    <slot />
  </div>
</template>

<script lang="ts">
  import { defineComponent, nextTick, onMounted, ref } from 'vue'
  import Sortable from 'sortablejs'
  export default defineComponent({
    props: ['item'],
    setup(props: any, { emit }) {
      const rowDrop1 = () => {
        const body: any = document.querySelector(`.spec-value-con-${props.item.id}`)

        Sortable.create(body, {
          animation: 200, // 定义排序动画的时间
          forceFallback: true,
          filter: '.add-btn-spec-value',
          onEnd(evt: any) {
            props.item.valueList.splice(evt.newIndex, 0, props.item.valueList.splice(evt.oldIndex, 1)[0])
            var newArray = props.item.valueList.slice(0)
            props.item.valueList = []
            nextTick(() => {
              props.item.valueList = newArray
            })
          },
        })
      }
      onMounted(() => {
        // rowDrop1()
      })
    },
  })
</script>

<style lang="less" scoped>
  .spec-value-con {
    display: flex;
    flex-wrap: wrap;
    .spec-value-item {
      display: flex;
      height: 30px;
      line-height: 30px;
      border: 1px solid #d7d7d7;
      margin-bottom: 5px;
      .left-text {
        padding: 0 5px;
        box-sizing: border-box;
        border-right: 1px solid #d7d7d7;
        user-select: none;
      }
      .btn-del {
        width: 30px;
        height: 30px;
        text-align: center;
        font-size: 20px;
      }
    }
  }
</style>
